<script setup>
import { ref, onMounted } from "vue";
import { getPersonalInfo } from '@/api/user.js'

const centerDialogVisible = ref(false)

const data = ref([]);

onMounted( async () => {
  if(!localStorage.getItem("token")){
    router.push("/login")
    return; 
  }
  const id = JSON.parse(localStorage.getItem("token")).id;
  const result = await getPersonalInfo(id);
  if (result.code) {
    data.value = result.data;
  }else{
    ElMessage.error(result.msg)
  }
  }
)

</script>

<template>
  <div class="page-container" :style=" {backgroundImage: 'url(' + data.imageBackground + ')' }">
    <div class="conint">
      <span>头像：</span>
      <img :src="data.imageHead" alt="头像" style="height: 240px;">
    </div>
    <div style="margin-top: 20px;">
      <span>简介：</span>
      <span>{{ data.introductory }}</span>
    </div>
    <el-button class="button" type="success" round @click="centerDialogVisible = true">修改</el-button>
  </div>

  <el-dialog
    v-model="centerDialogVisible"
    title="修改个人信息"
    width="500"
    align-center
  >
    <span>接口做了，但前端先不做了</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>
.button {
  margin-top: 20px;
}

.conint{
  
  display: flex; 
  align-items: flex-start; 
  gap: 10px;
}

.page-container {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  padding: 40px;
}

</style>
